<template>
    <div>
      <nav-top title="忘记密码" show="true" showTitle="0"></nav-top>
      <ul class="forgetwordmain">
        <li class="clearfix">
          <div class="clearfix">
            <label class="fl">
              账 &nbsp 号
            </label>
            <input data-vv-as="账号" name="name" v-model="name" type="text" class="name fl" placeholder="请输入游戏ID"
                   v-validate="'required|numeric'">
          </div>
          <div class="errorTips">
            <span v-show="errors.has('name')">{{ errors.first('name') }}</span>
          </div>
        </li>
        <li class="clearfix">
          <div class="clearfix">
            <label class="fl" >
              手机号
            </label>
            <input data-vv-as="手机号" type="text" v-model="phone" name="phone" class="phone fl" placeholder="请输入手机号"
                   v-validate="{
                      required: true,
                      numeric: true,
                      min:11,
                      max:11
                   }">
          </div>
          <div class="errorTips">
            <span v-show="errors.has('phone')">{{ errors.first('phone') }}</span>
          </div>
        </li>
        <li class="clearfix">
          <div class="clearfix">
            <label class="fl">
              验证码
            </label>
            <input data-vv-as="验证码" v-model="code" name="code" type="text" class="code fl" placeholder="请输入6位验证码"
                   v-validate="{ required: true, numeric:true ,min:4,max:6}">
            <button id="sendCode" @click="codeBtnValidate">发送验证码</button>
          </div>
          <div class="errorTips">
            <span v-show="errors.has('code')">{{ errors.first('code') }}</span>
          </div>
        </li>
        <li class="clearfix">
          <div class="clearfix">
            <label class="fl">
              新密码
            </label>
            <input data-vv-as="新密码" v-model="password" name="password" type="password" class="newWord fl" placeholder="由6-12位密码不含汉字字符"
                   v-validate="{required: true, alpha_dash:true}">
          </div>
          <div class="errorTips">
            <span v-show="errors.has('password')">{{ errors.first('password') }}</span>
          </div>
        </li>
        <li class="clearfix">
          <div class="clearfix">
            <label class="fl">
              确定密码
            </label>
            <input type="password" v-validate="{is:password}" v-model="sureNewWord"
                    name="sureNewWord" class="sureNewWord fl" placeholder="请再次输入密码">
          </div>
          <div class="errorTips">
            <span v-show="errors.has('sureNewWord')">{{ errors.first('sureNewWord') }}</span>
          </div>
        </li>
      </ul>
      <div class="forgetBtn">
        <button @click="validateForm">确认</button>
      </div>
    </div>
</template>

<script>
  import NavTop from '../components/navTop.vue'
  export default {
    name: '',
    data () {
      return {
        name: '',
        phone: '',
        code: '',
        password: '',
        sureNewWord: ''
      }
    },
    components: {NavTop},
    methods: {
      validateForm () {
        this.$validator.validateAll({
          phone: this.phone,
          name: this.phone,
          code: this.code,
          password: this.password,
          sureNewWord: this.sureNewWord
        }).then((result) => {
          console.log(result)
          if (result) {
            return false
          }
        })
      },
      codeBtnValidate () {
        console.log(this)
        this.$validator.validate('phone', this.phone).then((result) => {
          console.log(result)
          if (result) {
            return false
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .forgetwordmain{
    margin-top:0.44rem;
    background-color: white;
    border-top: 0.02rem solid #e8e8e8;
    li{
      padding:0.23rem 0 0.17rem 0.22rem;
      border-bottom:0.02rem solid #e8e8e8;
      font-size:0.3rem;
      label{
        height:0.6rem;
        line-height:0.6rem;
        width:1.4rem;
      }
      input{
        width:3.8rem;
        height: 0.6rem;
        padding-left:0.1rem;
        border:none;
        background-color: #F2F2F4;
        box-shadow: inset 0 0px 0.03rem 0.03rem #E8E8E8;
        outline: none;
      }
      input:-ms-input-placeholder{text-align: center;}
      input::-webkit-input-placeholder{text-align: center;}
      input::-moz-placeholder { text-align: center; }
      button{
        background-color: #00B01E;
        border-radius: 0.1rem;
        width:1.7rem;
        height: 0.6rem;
        border:none;
        outline:none;
        color: #fff;
        margin-right:0.2rem;
        font-size:0.2rem;
        float: right;
      }
      .active{
        background-color: #9B9B9B;
      }
    }
  }
  .forgetBtn{
    padding-top: 0.3rem;
    text-align: center;
    button{
      background-color: #00B01E;
      border-radius: 0.1rem;
      width:4.02rem;
      height: 0.61rem;
      border:none;
      outline:none;
      color: #fff;
    }

  }
  .errorTips{
    padding-left:1.4rem;
    color: #ff4c39;
    font-size:0.3rem;
  }
</style>
